import React, { useEffect, useState } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import AxTable from '@/components/AxList/AxTable';
import { axconst } from '@/shared/axconst';
import { axhttp } from '@/shared/axhttp';
import { AxColumnEnum } from '@/components/AxList';
import { axhelper } from '@/shared/axhelper';

const { getDataX } = axhttp;
/** 流转记录 */
const Record: React.FC<any> = props => {
    const { recordId, url } = props;
    const [data, setData] = useState<any>(axconst.initialList);
    const [loading, setLoading] = useState<any>(false);

    useEffect(() => {
        setLoading(true);
        /** 流转记录 */
        getDataX(url.readDetailList, { recordId: recordId }).then((res: any) => {
            setData({
                list: res.list.map((m: any) => ({
                    id: axhelper.guid(),
                    ...m,
                })),
                success: true,
            });
        }).finally(() => {
            setLoading(false);
        });
    }, [recordId]);

    const columns = [
        {
            title: '姓名',
            dataIndex: 'fromUserName',
            width: axconst.width.five,
        },
        {
            title: '接收人',
            dataIndex: 'userName',
            width: axconst.width.five,
        },
        {
            title: '节点名称',
            dataIndex: 'nodeName',
            width: axconst.width.five,
        },
        {
            title: '处理类型',
            dataIndex: 'workFlowDealType',
            width: axconst.width.five,
            // render: (val: any) => <AxColumnEnum enumName='workFlowDealType' value={val} />,
        },
        {
            title: '处理时间',
            dataIndex: 'dealTime',
            width: axconst.width.time,
        },
        {
            title: '签字意见',
            dataIndex: 'remark',
            width: axconst.width.longxl,
        },
    ];

    return (
        <AxCard size="small" style={{ marginTop: 16 }} bodyStyle={{ padding: 0 }}>
            <AxTable
                bordered
                size="small"
                title={() => '流转记录'}
                checkboxModel={false}
                showTopSlider={false}
                selectOnClick={false}
                loading={loading}
                data={data}
                columns={columns}
                showPagination={null}
                addemptycolumn={true}
            />
        </AxCard>
    );
};

export default Record;
